<template>
	<view style="background: #FFFFFF;">
		<canvas v-if="!tempFilePath" :canvas-id="CanvasID" :style="{ width: canvasW + 'px', height: canvasH + 'px' }"></canvas>
		<image v-else lazy-load :src="tempFilePath" mode="widthFix" class="is-response" @longpress="toSave(tempFilePath)"></image>
	</view>
</template>

<script>
	var _this;
	export default {
		name: 'cc-poster',
		props: {
			CanvasID: {
				//CanvasID 等同于 canvas-id
				Type: String,
				default: 'PosterCanvas'
			},
			imgSrc: {
				//展示图
				Type: String,
				default: ''
			},
			QrSrc: {
				//二维码
				Type: String,
				default: ''
			},
			Title: {
				//文本内容
				Type: String,
				default: '省钱兄'
			},
			TitleColor: {
				//标题颜色
				Type: String,
				default: '#333333'
			},
			LineType: {
				//标题显示行数 大于两行是否省略	（注超出2行显示会导致画布布局絮乱）
				Type: [String, Boolean],
				default: true
			},
			PriceTxt: {
				//价格值
				Type: String,
				default: ''
			},
			PriceColor: {
				//价格颜色
				Type: String,
				default: '#e31d1a'
			},
			OriginalTxt: {
				//原价值
				Type: String,
				default: ''
			},
			OriginalColor: {
				//默认颜色（如原价与扫描二维码颜色）
				Type: String,
				default: '#b8b8b8'
			},
			Width: {
				//画布宽度  (高度根据图片比例计算 单位upx)
				Type: String,
				default: 660
			},
			CanvasBg: {
				//canvas画布背景色
				Type: String,
				default: '#ffffff'
			},
			Referrer: {
				//推荐人信息
				Type: String,
				default: '精选好物'
			},
			ViewDetails: {
				//描述提示文字
				Type: String,
				default: '长按或扫描识别二维码领券'
			},
			profilePicture:{
				//展示图
				Type: String,
				default: ''
			}
		},
		data() {
			return {
				loading: false,
				tempFilePath: '',
				canvasW: 0,
				canvasH: 0,
				canvasImgSrc: '',
				ctx: null
			};
		},
		methods: {
			toSave(url) {
				console.log("长按开始");
				console.log(url||this.tempFilePath)
				uni.getImageInfo({
					src: this.tempFilePath||url,
					success: function(image) {
						console.log('图片信息：', JSON.stringify(image));
						uni.saveImageToPhotosAlbum({
							filePath: image.path,
							success: function() {
								console.log('save success');
								uni.showToast({
									title: '海报已保存相册',
									icon: 'success',
									duration: 2000
								});
							}
						});
					}
				});
			},
			async OnCanvas() {
				this.loading = true;
				
				// this.$queue.showLoading('海报生成中...');
				_this.ctx = uni.createCanvasContext(_this.CanvasID, this);
				// console.log(_this.Width)
				const C_W = uni.upx2px(_this.Width), //canvas宽度
					C_P = uni.upx2px(0), //canvas Paddng 间距
					M_Q = uni.upx2px(364),
					M_Q_1 = uni.upx2px(72),
					C_Q_1 = uni.upx2px(114),
					C_Q = uni.upx2px(280); //二维码或太阳码宽高
				let _strlineW = 0; //文本宽度
				let _imgInfo = await _this.getImageInfo({
					imgSrc: _this.imgSrc
				}); //广告图
				//推荐人头像
				let profilePicture = await _this.getImageInfo({
					imgSrc: _this.profilePicture
				}); //广告图
				console.log('图片信息0：', JSON.stringify(""));
				
				let _QrCode = await _this.getImageInfo({
					imgSrc: _this.QrSrc
				}); //二维码或太阳码
				
				console.log('图片信息1：', JSON.stringify(""));
				
				let r = [_imgInfo.width, _imgInfo.height];
				let q = [_QrCode.width, _QrCode.height];
				let imgW = C_W - C_P * 2;
				if (r[0] != imgW) {
					r[1] = Math.floor((imgW / r[0]) * r[1]);
					r[0] = imgW;
				}
				if (q[0] != C_Q) {
					q[1] = Math.floor((C_Q / q[0]) * q[1]);
					q[0] = C_Q;
				}
				_this.canvasW = C_W;
				_this.canvasH = r[1] + q[1];
				_this.ctx.setFillStyle(_this.CanvasBg); //canvas背景颜色
			
				_this.ctx.fillRect(0, 0, C_W, _this.canvasH); //canvas画布大小
				
				//添加图片展示
				_this.ctx.drawImage(_imgInfo.path, C_P, C_P, r[0], r[1]);
				// return false;
				//添加图片展示 end

				//设置文本
				let upx2px33=uni.upx2px(33);
				_this.ctx.setFontSize(uni.upx2px(33)); //设置标题字体大小
				_this.ctx.setFillStyle(_this.TitleColor); //设置标题文本颜色
				let _strLastIndex = 0; //每次开始截取的字符串的索引
				let _strHeight = r[1] + C_P * 2 + 60; //绘制字体距离canvas顶部的初始高度
				let _strLeft =_this.Title.length*upx2px33; 
				_this.ctx.fillText(_this.Title, C_W/2-_strLeft/2,_strHeight);
				
				//添加二维码
				_strHeight += uni.upx2px(20);
				console.log(_QrCode.path, r[0] - q[0] + C_P, _strHeight, q[0], q[1])
				console.log(M_Q,C_W/2-C_Q/2,r[0],q[0], C_P,q[0], q,C_Q)
				_this.ctx.drawImage(_QrCode.path, C_W/2-C_Q/2, C_Q_1, q[0], q[1]);
				//添加二维码 end
				//添加 推荐人头像
				// profilePicture
				//添加推荐人与描述
				let Y_Q = uni.upx2px(136);
				// _this.ctx.setStrokeStyle('red');
				// _this.ctx.setLineWidth(2);
				// _this.ctx.stroke();
				// _this.ctx.arc(10, 10, 10, 0, 2 * Math.PI);
				
				_this.ctx.drawImage(profilePicture.path,C_W/2-Y_Q/2,r[1]-Y_Q/2,Y_Q, Y_Q);
				// _this.handleBorderRect(_this.ctx,20, 20, 20,20,2 * Math.PI)
				// _this.ctx.clip();
				// 
				_this.ctx.setFillStyle('#181D24');
				_this.ctx.setFontSize(uni.upx2px(33));
				let Referrerset=_this.Referrer.length*upx2px33;
				_this.ctx.fillText(_this.Referrer,C_W/2-Referrerset/2, _strHeight+20);
				_this.ctx.setFillStyle('#FFFFFF');
				let fonst=uni.upx2px(33)
				_this.ctx.setFontSize(uni.upx2px(33));
				let wi=_this.ViewDetails.length*fonst;
				// console.log(_this.ViewDetails.length*fonst)
				_this.ctx.fillText(_this.ViewDetails, C_W/2-wi/2, M_Q_1+M_Q+fonst+2);
				//添加推荐人与描述 end
				//延迟后渲染至canvas上
				setTimeout(function() {
					_this.ctx.draw(true, ret => {
						uni.hideLoading();
						_this.getNewImage();
					});
				}, 600);
			},
			async getImageInfo({
				imgSrc
			}) {
				return new Promise((resolve, errs) => {
					uni.getImageInfo({
						src: imgSrc,
						success: function(image) {
							resolve(image);
						},
						fail(err) {
							errs(err);
							
							uni.showToast({
								title: '海报生成失败',
								mask: false,
								duration: 2000,
								icon: "none"
							});
							uni.hideLoading()
						}
					});
				});
			},
			handleBorderRect(ctx, x, y, w, h, r) {
				ctx.beginPath();
				// 左上角
				ctx.arc(x + r, y + r, r, Math.PI, 1.5 * Math.PI);
				ctx.moveTo(x + r, y);
				ctx.lineTo(x + w - r, y);
				ctx.lineTo(x + w, y + r);
				// 右上角
				ctx.arc(x + w - r, y + r, r, 1.5 * Math.PI, 2 * Math.PI);
				ctx.lineTo(x + w, y + h - r);
				ctx.lineTo(x + w - r, y + h);
				// 右下角
				ctx.arc(x + w - r, y + h - r, r, 0, 0.5 * Math.PI);
				ctx.lineTo(x + r, y + h);
				ctx.lineTo(x, y + h - r);
				// 左下角
				ctx.arc(x + r, y + h - r, r, 0.5 * Math.PI, Math.PI);
				ctx.lineTo(x, y + r);
				ctx.lineTo(x + r, y);
		
				ctx.fill();
				ctx.closePath();
			},
			getNewImage() {
				uni.canvasToTempFilePath({
						canvasId: _this.CanvasID,
						quality: 1,
						complete: res => {
							_this.tempFilePath = res.tempFilePath;
							_this.$emit('success', res);
							_this.loading = false;
						
							uni.showToast({
								title: '长按图片保存海报',
								mask: false,
								duration: 2000,
								icon: "none"
							});
							uni.hideLoading();
						}
					},
					this
				);
			}
		},
		mounted() {
			_this = this;
			this.OnCanvas();
		}
	};
</script>

<style></style>
